<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    legendData: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    //单位
    unit: {
      type: String,
      default: "",
    },
    //Y单位
    yUnit: {
      type: String,
      default: "",
    },
    //柱子宽度
    barWidth: {
      type: String,
      default: "12",
    },
    //距离左边位置
    gridLeft: {
      type: String,
      default: "5%",
    },
    //距离右边位置
    gridRight: {
      type: String,
      default: "5%",
    },
    //是否显示Legend
    isLegend: {
      type: Boolean,
      default: false,
    },
    ySplitLineShow: {
      type: Boolean,
      default: false,
    },
    yAxisLineShow: {
      type: Boolean,
      default: false,
    },
    //是否显示单位
    isUnit: {
      type: Boolean,
      default: true,
    },
    //是否显示
    xAxisLineShow: {
      type: Boolean,
      default: false,
    },
    //是否显示顶部数字
    isCategory: {
      type: Boolean,
      default: true,
    },
    //柱状图颜色
    bar1Color: {
      type: String,
      default: "rgba(59,255,230,0.8)",
    },
    //是否显示多字自定义
    isMoretooltip: {
      type: Boolean,
      default: false,
    },
    minInterval: {
      // 返回的数据
      // type: Array | Object,
      default: function () {
        return 1;
      },
    },
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    tooltipLabel: {
      type: String,
      default: "箱",
    },
    /* 是否显示 */
    isTooltipY: {
      type: Boolean,
      default: true,
    },
    axisLabelShow: {
      type: Boolean,
      default: true,
    },
  },
  computed: {},
  watch: {
    axisLabelShow: "drawLine", // 数值变化是更新图表
    legendData: "drawLine", // 数值变化是更新图表
    barWidth: "drawLine", // 数值变化是更新图表
    isCategory: "drawLine", // 数值变化是更新图表
    yAxisLineShow: "drawLine", // 数值变化是更新图表
    ySplitLineShow: "drawLine", // 数值变化是更新图表
    xAxisLineShow: "drawLine", // 数值变化是更新图表
    gridLeft: "drawLine", // 数值变化是更新图表
    gridRight: "drawLine", // 数值变化是更新图表
    yUnit: "drawLine", // 数值变化是更新图表
    bar1Color: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
    isMoretooltip: "drawLine", // 数值变化是更新图表
  },
  data() {
    return {
      temp: 0,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        let legendData = ["", ""];
        if (this.legendData.length == 1) {
          legendData[0] = this.legendData[0];
        }
        if (this.legendData.length == 2) {
          legendData[0] = this.legendData[0];
          legendData[1] = this.legendData[1];
        }
        // console.log(legendData)
        let isAxisLabel = true;
        let gridTop = "13%";
        if (this.isLegend) {
          gridTop = "18%";
          isAxisLabel = true;
        } else {
          if (this.legendData.length == 1) {
            if (!this.isCategory) {
              gridTop = "22%";
            }
          } else {
            gridTop = "13%";
          }
        }

        this.$nextTick(() => {
          this.temp = 0;
          var _this = this;
          let categoryArray = [];
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          for (let item of this.data) {
            let categoryArr = [];
            item.value3 = item.value1 + item.value2;
            categoryArr.push(item.value1, item.value2);
            categoryArray.push(categoryArr);
          }
          let unit = "";
          if (this.isUnit == true) {
            unit = this.yUnit;
          } else {
            unit = "";
          }
          let xAxis = [
            {
              type: "category",
              axisLine: {
                show: this.xAxisLineShow,
                lineStyle: {
                  color: "rgba(7,219,255,0.2)",
                  // type: "dashed",
                },
              },
              //文字
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#d4f0ff",
                  fontSize: fontSize.fontSize(0.082),
                  padding: [3, 0, 0, 0],
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.3)", // 分割线颜色
                },
                show: false,
              },
            },
          ];

          let yObj = {
            type: "category",
            offset: -20,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              show: isAxisLabel,
              textStyle: {
                fontSize: fontSize.fontSize(0.082),
                color: "#2BDDF1",
                // padding: [20, 0, 0, 0],
              },
              formatter: (value, index) => {
                let arr = value.split(",");
                let abc = ["a", "b", "c", "d", "e"];
                let substr = "";
                for (let index in this.legendData) {
                  let sub =
                    "{" + abc[index] + "|" + arr[index] + this.unit + "}\n";
                  substr += sub;
                }
                return substr;
              },
              rich: {
                a: {
                  color: "rgba(59,255,230,1)",
                  padding: [2, 5, 4, 5],
                  align: "center",
                  fontSize: fontSize.fontSize(0.082),
                  fontWeight: 600,
                  width: 30,
                  borderRadius: [5, 5, 0, 0],
                  backgroundColor: "rgba(6,49,71,0.6)",
                },
                b: {
                  color: "rgba(248,255,59,1)",
                  align: "center",
                  fontSize: fontSize.fontSize(0.082),
                  padding: [2, 5, 2, 5],
                  fontWeight: 600,
                  width: 30,
                  borderRadius: [0, 0, 5, 5],
                  backgroundColor: "rgba(6,49,71,0.6)",
                },
              },
            },
            data: categoryArray,
            splitArea: { show: false },
            splitLine: { show: false },
            // data: [250, 250 ,250, 250, 250],
          };
          if (this.isCategory == true) {
            xAxis.push(yObj);
          }
          let option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
                shadowStyle: {
                  color: "rgba(123, 121, 78,0.1)",
                  width: "10px",
                },
              },
              borderColor: "red", // 提示框浮层的边框颜色。
              backgroundColor: "rgba(7, 52, 75,0.8)",
              show: true,
              textStyle: {
                fontSize: fontSize.fontSize(0.082),
              },
              padding: 8, // 提示框浮层内边距，
              formatter: (params, ticket, callback) => {
                var showHtm = params[0].data.name;
                if (this.isMoretooltip == true) {
                  for (var i = 0; i < this.legendData.length; i++) {
                    let legend = "";
                    let str = "";
                    for (let item of params[i].data.valueArr) {
                      str += item + this.tooltipLabel + "；" + "<br>";
                    }
                    if (this.legendData[i] != "") {
                      legend = this.legendData[i] + " : ";
                    } else {
                      ("");
                    }
                    if (this.isTooltipY) {
                      showHtm +=
                        "<br>" +
                        legend +
                        params[i].data["value" + (Number(i) + 1)] +
                        "<br>" +
                        str;
                    } else {
                      showHtm += "<br>" + str;
                    }
                  }
                } else {
                  for (var i = 0; i < this.legendData.length; i++) {
                    let legend = "";
                    if (this.legendData[i] != "") {
                      legend = this.legendData[i] + " : ";
                    } else {
                      ("");
                    }
                    showHtm +=
                      "<br>" +
                      legend +
                      params[i].data["value" + (Number(i) + 1)] +
                      "<br>";
                  }
                }

                return showHtm;
              },
              data: this.legendData,
            },
            legend: {
              show: this.isLegend,
              // padding: [8, 30, 8, 40], //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
              // borderColor: "rgba(85, 150, 188,0.5)", //边框颜色
              // borderWidth: 1, //边框线宽
              data: this.legendData,
              // data: [
              //   {
              //     name: "已完成",
              //     textStyle: {
              //       fontSize: fontSize.fontSize(0.082),
              //       fontWeight: "bolder",
              //       color: "#cccccc",
              //     },
              //     icon: "image://https://img2.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto", //格式为'image://+icon文件地址'，其中image::后的//不能省略
              //   },
              //   {
              //     name: "进行中",
              //     textStyle: {
              //       fontSize: fontSize.fontSize(0.082),
              //       fontWeight: "bolder",
              //       icon: "image://./images/icon2.png", //格式为'image://+icon文件地址'，其中image::后的//不能省略
              //     },
              //     icon: "pie",
              //   },
              // ],
              top: "2%",
              left: "center",
              icon: "roundRect",
              itemWidth: 20,
              itemHeight: 6,
              textStyle: {
                color: "#fff",
                padding: [0, 0, 0, 6],
                fontSize: fontSize.fontSize(0.084),
              },
              // shadowColor: "yellow",
              // shadowOffsetX: 0, //阴影水平方向上的偏移距离
              // shadowOffsetY: 0, //阴影垂直方向上的偏移距离
              // shadowBlur: 5, //阴影的模糊大小
              // backgroundColor: "../../../assets/images/loginFormBj.png",
            },
            grid: {
              top: gridTop,
              left: this.gridLeft,
              right: this.gridRight,
              bottom: "4%",
              containLabel: true,
            },
            xAxis: xAxis,
            yAxis: {
              type: "value",
              name: unit,
              minInterval: this.minInterval,
              nameTextStyle: {
                color: "#d4f0ff",
                align: "right",
                verticalAlign: "middle",
                padding: [0, 12, 1, 0],
                fontSize: fontSize.fontSize(0.082),
              },
              //   data: ["已签收", "配送中", "已出库", "采购中", "接单中"],
              axisLabel: {
                show: this.axisLabelShow,
                textStyle: {
                  color: "#d4f0ff",
                  fontSize: fontSize.fontSize(0.082),
                  padding: [0, 6, 0, 0],
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: this.yAxisLineShow,
                lineStyle: {
                  color: "rgba(7,219,255,0.2)",
                  // type: "dashed",
                },
              },
              splitLine: {
                show: this.ySplitLineShow,
                textStyle: {
                  color: "#d4f0ff",
                },
                lineStyle: {
                  color: "rgba(7,219,255,0.4)",
                  type: "dashed",
                },
              },
            },
            series: [
              {
                name: legendData[0],
                type: "bar",
                stack: "total",
                label: {
                  show: true,
                },
                emphasis: {
                  focus: "series",
                },
                // data: [121, 828, 144, 368, 390],
                barWidth: this.barWidth,
                itemStyle: {
                  normal: {
                    label: {
                      show: !this.isCategory, //开启显示
                      position: "top", //在上方显示 insideRight /top /right
                      textStyle: {
                        //数值样式
                        color: "rgba(59,255,230,1)",
                        fontSize: fontSize.fontSize(0.08),
                        fontWeight: 600,
                        backgroundColor: "rgba(8, 55, 95,0)",
                        padding: [4, 6],
                        borderRadius: 3,
                      },
                      formatter: (options) => {
                        return options.data.value1 + this.unit;
                      },
                    },
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: this.bar1Color },
                        { offset: 1, color: this.bar1Color },
                      ]
                    ),
                    // borderColor: "rgba(7,165,255,0.7)",
                    shadowBlur: 5,
                    shadowColor: this.bar1Color,
                  },
                  label: {
                    show: true,
                  },
                  labelLine: {
                    show: false,
                  },
                },
                zlevel: 2,
              },
              {
                name: legendData[1],
                type: "bar",
                stack: "total",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                // data: [271, 132, 413, 210, 521],
                barWidth: this.barWidth,
                itemStyle: {
                  normal: {
                    label: {
                      show: false, //开启显示
                      position: "right", //在上方显示 insideRight /top /right
                      textStyle: {
                        //数值样式
                        color: "rgba(248,255,59,1)",
                        fontSize: fontSize.fontSize(0.082),
                        fontWeight: 600,
                      },
                      // icon: "circle",
                      formatter: (options) => {
                        return options.data.value2 + this.unit;
                      },
                    },
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "rgba(248,255,59,0.8)" },
                        { offset: 1, color: "rgba(248,255,59,0.8)" },
                      ]
                    ),
                    // borderColor: "#a2f9f7",
                    shadowBlur: 5,
                    shadowColor: "rgba(248,255,59,1)",
                  },
                  label: {
                    show: true,
                  },
                  labelLine: {
                    show: false,
                  },
                },
                zlevel: 2,
              },
              // {
              //   // 分隔
              //   type: "pictorialBar",
              //   name: "总和",
              //   itemStyle: {
              //     normal: {
              //       color: "rgba(9, 59, 118, 0.9)",
              //     },
              //   },
              //   symbolRepeat: "fixed",
              //   symbolMargin: 3,
              //   symbol: "rect",
              //   symbolClip: true,
              //   symbolSize: [this.barWidth, 4],
              //   symbolPosition: "start",
              //   symbolOffset: [0, 0],
              //   // data: [126, 85, 78, 35, 90],
              //   width: 2,
              //   z: 0,
              //   zlevel: 3,
              // },
            ],
            dataset: {
              source: this.data,
            },
          };

          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>
